<template>
  <div class="home">
    <div class="HomePage" id="box">
      <div class="Section_0">
        <!-- 主页在这儿 -->
      </div>
      <div class="Section_1">
        <transition name="head">
          <div class="Section_1_Head" v-show="isShow1">
            <h1>Section_1</h1>
            <p>Hunting1</p>
          </div>
        </transition>
        <transition name="left1">
          <div class="Section_1_Left" v-show="isShow1">
            哈哈1
          </div>
        </transition>
        <transition name="right1">
          <div class="Section_1_right" v-show="isShow1">
            <img src="../assets/HomePagePic/Section1-right.png" alt="" />
          </div>
        </transition>
      </div>
      <div class="Section_2">
        <transition name="head">
          <div class="Section_2_Head" v-show="isShow2">
            <h1>海量资源</h1>
            <p>——为您量身打造专业选题助手</p>
          </div>
        </transition>
        <!-- <transition name="left2"> -->
        <div class="Section_2_Left">
          <div class="NumberRoll">
            <NumberRoll :from="StartNumberRoll1" :to="NumberRoll1" />
          </div>
          <div class="NumberRollTitle">
            文献资源
          </div>
          <div class="NumberRoll">
            <NumberRoll :from="StartNumberRoll2" :to="NumberRoll2" />
          </div>
          <div class="NumberRollTitle">
            注册用户
          </div>
          <div class="NumberRoll">
            <NumberRoll :from="StartNumberRoll3" :to="NumberRoll3" />
          </div>
          <div class="NumberRollTitle">
            入驻学者
          </div>
          <div class="NumberRoll">
            <NumberRoll :from="StartNumberRoll4" :to="NumberRoll4" />
          </div>
          <div class="NumberRollTitle">
            科研项目
          </div>
        </div>
        <!-- </transition> -->
        <transition name="right2">
          <div class="Section_2_right" v-show="isShow2">
            <img src="../assets/HomePagePic/Section2-right.png" alt="" />
          </div>
        </transition>

      </div>
      <div class="Section_3">
        <transition name="head">
          <div class="Section_3_Head" v-show="isShow3">
            <h1>卡片页</h1>
            <p>3D可交互卡片</p>
          </div>
        </transition>
        <transition name="middle3">
          <div class="wrap" v-show="isShow3">
            <div class="card-item">

            </div>
            <div class="card-item">

            </div>
            <div class="card-item">

            </div>
          </div>
        </transition>
      </div>
      <div class="Section_4">
        <div style="width: 100%;min-height: 30vh;"></div>
        <div class="AboutUs">
          <transition name="middle4">
          <div class="GetStart" v-show="isShow4">
            <div class="GetStartLeft">
              <div class="GetStartLeftTitle">Ready to get started?</div>
              <div class="GetStartLeftSubtitle">去创建个人账号</div>
            </div>
            <div class="GetStartRight">
              <div class="GetStartRightBlock">
                <!-- btn ToLoginButton hover-filled-slide-down -->
                <button class="ToLoginButton" @click="toLogin()">
                  <span>
                    登录
                  </span>
                </button>
                <!-- btn ToRegisterButton hover-filled-slide-right -->
                <button class="ToRegisterButton" @click="toRegister()">
                  <span>
                    注册
                  </span>
                </button>
              </div>
            </div>
          </div>
        </transition>
          <div class="OurInfo">
            <div class="OurInfoTitle">
              <img src="../assets/HomePagePic/Hunting.png" alt="" />
            </div>
            <div class="OurInfoContent">
              <div class="OurInfoContent1">
                <h3>合作服务</h3>
                <div class="OurInfoContent1-block">
                  <div class="OurInfoContent1-block1">
                    <span>
                      科技成果转化中介服务
                    </span>
                  </div>
                  <div class="OurInfoContent1-block2">
                    <span>
                      期刊合作
                    </span>
                  </div>
                  <div class="OurInfoContent1-block3">
                    <span>
                      图书馆合作
                    </span>
                  </div>
                </div>
              </div>
              <div class="OurInfoContent2">
                <h3>联系我们</h3>
                <div class="OurInfoContent2-block1">
                  <img src="../assets/HomePagePic/WeChatQRcode.png" alt="" />
                  &nbsp;<span style="position:relative;top:-1px;">创始人微信</span>
                </div>
                <div class="OurInfoContent2-block2">
                  <img src="../assets/HomePagePic/Section4_flower.png" alt="" />
                </div>
                <div class="OurInfoContent2-block3">
                  <span style="color: #9D9C9C;">邮箱</span>&nbsp;<span>3335356471@qq.com</span><br />
                  <span style="color: #9D9C9C;">QQ</span>&nbsp;&nbsp;<span>3335356471</span>
                </div>
              </div>
              <div class="OurInfoContent3">
                <h3>其它服务</h3>
                <div class="OurInfoContent3-block">
                  <div class="OurInfoContent3-block1">
                    <span>
                      打印用户手册
                    </span>
                  </div>
                  <div class="OurInfoContent3-block2">
                    <span>
                      意见反馈
                    </span>
                  </div>
                  <div class="OurInfoContent3-block3">
                    <img src="../assets/HomePagePic/Section4_foot.png" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import NumberRoll from "@/components/NumberRoll.vue"
import Vanilla from "vanilla-tilt";
export default {
  name: 'HomeView',
  components: { NumberRoll },
  data() {
    return {
      nowPage: 0,
      box: undefined,
      isShow1: false,
      isShow2: false,
      isShow3: false,
      isShow4: false,
      StartNumberRoll1: 27837704,
      StartNumberRoll2: 3021,
      StartNumberRoll3: 143,
      StartNumberRoll4: 36089,
      NumberRoll1: 0,
      NumberRoll2: 0,
      NumberRoll3: 0,
      NumberRoll4: 0,
    }
  },
  methods: {
    addEvent(obj, xEvent, fn) {
      if (obj.attachEvent) {
        obj.attachEvent('on' + xEvent, fn);
      } else {
        obj.addEventListener(xEvent, fn, false);
      }
    },
    pageUp() {
      if (this.nowPage === 4) {
        this.box.style.transform = 'translate3d(0, -300%, 0)'  //'transform: translate3d(0, -100%, 0);transition: all 700ms ease 0s;'
        this.box.style.transition = 'all 700ms ease 0s'
        this.isShow4 = false
        this.isShow3 = true
        this.nowPage--
      } else if (this.nowPage === 3) {
        this.box.style.transform = 'translate3d(0, -200%, 0)'  //'transform: translate3d(0, -100%, 0);transition: all 700ms ease 0s;'
        this.box.style.transition = 'all 700ms ease 0s'
        this.isShow3 = false
        this.isShow2 = true
        this.NumberRoll1 = this.StartNumberRoll1
        this.NumberRoll2 = this.StartNumberRoll2
        this.NumberRoll3 = this.StartNumberRoll3
        this.NumberRoll4 = this.StartNumberRoll4
        this.StartNumberRoll1 = 0
        this.StartNumberRoll2 = 0
        this.StartNumberRoll3 = 0
        this.StartNumberRoll4 = 0
        console.log(this.isShow2 + ' 应该是false')
        console.log(this.isShow1 + ' 应该是true')
        this.nowPage--
      } else if (this.nowPage === 2) {
        //进行操作
        this.box.style.transform = 'translate3d(0, -100%, 0)'  //'transform: translate3d(0, -100%, 0);transition: all 700ms ease 0s;'
        this.box.style.transition = 'all 700ms ease 0s'
        this.isShow2 = false
        this.isShow1 = true
        this.StartNumberRoll1 = this.NumberRoll1
        this.StartNumberRoll2 = this.NumberRoll2
        this.StartNumberRoll3 = this.NumberRoll3
        this.StartNumberRoll4 = this.NumberRoll4
        this.NumberRoll1 = 0
        this.NumberRoll2 = 0
        this.NumberRoll3 = 0
        this.NumberRoll4 = 0
        console.log(this.isShow2 + ' 应该是false')
        console.log(this.isShow1 + ' 应该是true')
        this.nowPage--
        //console.log(nowPage)
      } else if (this.nowPage === 1) {
        //进行操作
        this.box.style.transform = 'translate3d(0, 0, 0)'  //'transform: translate3d(0, -100%, 0);transition: all 700ms ease 0s;'
        this.box.style.transition = 'all 700ms ease 0s'
        this.isShow1 = false
        console.log(this.isShow1 + ' 应该是false')
        console.log(this.isShow0 + ' 应该是true')
        this.nowPage--
        //console.log(nowPage)
      }
    },
    pageDown() {
      if (this.nowPage === 0) {
        //进行操作
        this.isShow1 = true
        this.box.style.transform = 'translate3d(0, -100%, 0)'  //'transform: translate3d(0, -100%, 0);transition: all 700ms ease 0s;'
        this.box.style.transition = 'all 700ms ease 0s'
        console.log(this.isShow1 + ' 应该是true')
        this.nowPage++
        //console.log(nowPage)
      } else if (this.nowPage === 1) {
        //进行操作
        this.box.style.transform = 'translate3d(0, -200%, 0)'  //'transform: translate3d(0, -100%, 0);transition: all 700ms ease 0s;'
        this.box.style.transition = 'all 700ms ease 0s'
        this.isShow1 = false
        this.isShow2 = true
        this.NumberRoll1 = this.StartNumberRoll1
        this.NumberRoll2 = this.StartNumberRoll2
        this.NumberRoll3 = this.StartNumberRoll3
        this.NumberRoll4 = this.StartNumberRoll4
        this.StartNumberRoll1 = 0
        this.StartNumberRoll2 = 0
        this.StartNumberRoll3 = 0
        this.StartNumberRoll4 = 0
        console.log(this.isShow1 + ' 应该是false')
        console.log(this.isShow2 + ' 应该是true')
        this.nowPage++
        //console.log(nowPage)
      } else if (this.nowPage === 2) {
        this.box.style.transform = 'translate3d(0, -300%, 0)'
        this.box.style.transition = 'all 700ms ease 0s'
        this.isShow2 = false
        this.isShow3 = true
        this.StartNumberRoll1 = this.NumberRoll1
        this.StartNumberRoll2 = this.NumberRoll2
        this.StartNumberRoll3 = this.NumberRoll3
        this.StartNumberRoll4 = this.NumberRoll4
        this.NumberRoll1 = 0
        this.NumberRoll2 = 0
        this.NumberRoll3 = 0
        this.NumberRoll4 = 0
        this.nowPage++
      } else if (this.nowPage === 3) {
        this.box.style.transform = 'translate3d(0, -400%, 0)'
        this.box.style.transition = 'all 700ms ease 0s'
        this.isShow3 = false
        this.isShow4 = true
        this.nowPage++
      }
    },
    onMouseWheel(e) {
      var ev = e || window.event;
      var down = true;
      down = ev.wheelDelta ? ev.wheelDelta < 0 : ev.detail > 0;
      if (down) {//鼠标滚轮下滑
        this.pageDown();
        //console.log('---------')
      } else {//鼠标滚轮上滑
        this.pageUp();
        //console.log('++++++++++')
      }
      if (ev.preventDefault) {
        // 阻止默认事件
        ev.preventDefault();
      }
      return false;
    },
    init() {
      this.box = document.getElementById('box');
      this.addEvent(this.box, 'mousewheel', this.onMouseWheel);
      this.addEvent(this.box, 'DOMMouseScroll', this.onMouseWheel);
      Vanilla.init(document.querySelectorAll(".card-item"), {
        max: 25,
        speed: 400,
      });
    },
    toLogin() {
      console.log("to login")
    },
    toRegister() {
      console.log("to register")
    }
  },
  mounted() {
    this.init();
  },
  beforeDestroy() {
    this.box.style.transform = 'translate3d(0, 0, 0)'
  }
}
</script>

<style>
html,
body {
  width: 100%;
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
}

/*最外层的容器*/
.HomePage {
  height: 100vh;
  width: 100vw;
}

/*隐藏导航栏*/
body::-webkit-scrollbar {
  display: none;
}

/*主页*/
.Section_0 {
  min-width: 100%;
  min-height: 100%;
}

/*介绍页1*/
.Section_1 {
  background-image: url("../assets/HomePagePic/Section1-bg.jpg");
  background-size: cover;
  min-width: 100%;
  min-height: 100%;
}

/*介绍页2*/
.Section_2 {
  background-image: url("../assets/HomePagePic/Section2-bg.jpg");
  background-size: cover;
  min-width: 100%;
  min-height: 100%;
}

.Section_3 {
  background-image: url("../assets/HomePagePic/Section3-bg.png");
  min-width: 100%;
  min-height: 100%;
}

/*主页的title*/
.Section_0_Head {
  text-align: center;
  min-height: 0%;
}

.Section_1_Left {
  height: 25vh;
  width: 25vw;
  display: inline-block;
}


.Section_1_right {
  height: 20vh;
  width: 20vw;
  position: relative;
  /* top: 10vh;
  left: 28.6vw; */
  top: 5vh;
  left: 40vw;

  display: inline-block;
}

.Section_1_right img {
  max-height: 50vh;
}

.Section_2_Left {
  height: 20vh;
  width: 25vw;
  position: relative;
  left: 15vw;
  top: 1vh;
  display: inline-block;
}

.Section_2_right {
  height: 40vh;
  width: 20vw;
  position: relative;
  top: 5vh;
  left: 22.7vw;
  display: inline-block;
}

.Section_2_right img {
  max-height: 80vh;
}

.NumberRoll {
  line-height: 60px;
  font-size: 55px;
  color: #3C7FD9;
}

.NumberRollTitle {
  line-height: 30px;
  color: #ABABAB;
  margin-bottom: 5vh;
}

@keyframes leftAnimation {
  from {
    transform: translateX(-100%);
    opacity: 0.5;
  }

  to {
    transform: translateX(0%);
    opacity: 1;
  }
}

@keyframes rightAnimation {
  from {
    transform: translateX(100%);
    opacity: 0.5;
  }

  to {
    transform: translateX(0%);
    opacity: 1;
  }
}

@keyframes headAnimation {
  from {
    transform: scaleX(0.4) scaleY(0.4);
    opacity: 0;
  }

  to {
    transform: scaleX(1) scaleY(1);
    opacity: 1;
  }
}

@keyframes MiddleAnimation {
  from {
    transform: translateY(100px);
    opacity: 0;
  }

  to {
    transform: translateY(0%);
    opacity: 1;
  }
}

.head-enter-active {
  animation: headAnimation 1s linear;
}

.head-leave-active {
  animation: headAnimation 1s reverse linear;
}

.left1-enter-active {
  animation: leftAnimation 1s;
}

.left1-leave-active {
  animation: leftAnimation 0.4s reverse;
}

.right1-enter-active {
  animation: rightAnimation 1s;
}

.right1-leave-active {
  animation: rightAnimation 0.5s reverse;
}

.left2-enter-active {
  animation: leftAnimation 1s;
}

.left2-leave-active {
  animation: leftAnimation 0.4s reverse;
}

.right2-enter-active {
  animation: rightAnimation 1s;
}

.right2-leave-active {
  animation: rightAnimation 0.5s reverse;
}

.middle3-enter-active {
  animation: MiddleAnimation 2s;
}

.middle3-leave-active {
  animation: MiddleAnimation 1s reverse;
}

.middle4-enter-active {
  animation: MiddleAnimation 2s;
}
.middle4-leave-active {
  animation: MiddleAnimation 1s reverse;
}
.Section_1_Head {
  color: white;
  text-align: center;
}

.Section_2_Head {
  color: #3C7FD9;
  text-align: center;
}

.Section_3_Head {
  color: white;
  text-align: center;
}

/* 第四页相关css */
.Section_4 {
  min-width: 100%;
  min-height: 100%;
}

.AboutUs {
  width: 100%;
  min-height: 60vh;
  background-image: url("../assets/HomePagePic/Section4_bg.png");
  background-position: center top;
  background-size: auto;
}

.GetStart {
  width: 54vw;
  min-height: 20vh;
  margin-left: 24vw;
  background-color: white;
  border-radius: 6px;
  position: relative;
  bottom: 10vh;
  box-shadow: 3px 18px 27px 5px #E2EBFF;
  overflow: hidden;
}

.GetStartLeft {
  display: inline-block;
  margin-top: 30px;
  margin-left: 40px;
}

.GetStartLeftTitle {
  color: #3C7FD9;
  line-height: 42px;
  font-size: 36px;
}

.GetStartLeftSubtitle {
  color: #A4ADB3;
  line-height: 23px;
  font-size: 20px;
  margin-top: 20px;
}

.GetStartRight {
  display: inline-block;
}

.GetStartRightBlock {
  margin-left: 4vw;
  position: relative;
  bottom: 4vh;
}

.ToLoginButton {
  background-color: #23C6BA;
  color: white;
  border: none;
  border-radius: 4px;
  margin-right: 3vw;
  /* 让两个按钮之间有一段距离 */
  cursor: pointer;
  /* 使鼠标悬浮时变成手型光标 */
  width: 120px;
  height: 40px;
}

.ToLoginButton:hover {
  background-color: rgba(35, 198, 186, 0.8);
  color: rgb(28, 31, 30);
  transition: 0.06s 0.03s;
}

.ToRegisterButton {
  background-color: #3B65F4;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: 120px;
  height: 40px;
}

.ToRegisterButton:hover {
  background-color: rgba(59, 101, 244, 0.8);
  color: rgb(28, 31, 30);
  transition: 0.06s 0.03s;
}

.OurInfo {
  width: 100vw;
  position: relative;
  bottom: 10vh;
}

.OurInfoTitle {
  margin-left: 10vw;
  margin-top: 5vh;
  margin-bottom: 2vh;
}

.OurInfoContent {
  margin-left: 10vw;
  width: 80vw;
  max-height: 40vh;
  border-radius: 5vh;
  box-shadow: 4px 6px 10px 4px #CEE9FA;
  overflow: hidden;
}

.OurInfoContent h3 {
  color: #3B76EF;
}

/* 花的大小 */
.OurInfoContent2-block2 img {
  height: 30vh;
}

.OurInfoContent1 {
  display: inline-block;
  position: relative;
  bottom: 34vh;
  left: 5vw;
}

.OurInfoContent1-block {
  position: relative;
  top: 3vh;
}

.OurInfoContent1-block1 {
  background-color: #CEE9FA;
  cursor: pointer;
  margin-left: 1.2vw;
  text-align: center;
  width: 14vw;
  height: 6vh;
  border-radius: 1.2vh;
}

.OurInfoContent1-block1:hover{
  opacity: 0.85;
}

.OurInfoContent1-block1 span {
  color: #1240A7;
  position: relative;
  font-size: 2vh;
  top: 1.5vh;
}

.OurInfoContent1-block2 {
  text-align: center;
  display: inline-block;
  margin-left: 1.2vw;
  margin-right: 1.5vw;
  position: relative;
  top: 4vh;
  cursor: pointer;
  background-color: #87B0E4;
  width: 6vw;
  height: 5vh;
  border-radius: 1vh;
}

.OurInfoContent1-block2:hover{
  opacity: 0.85;
}

.OurInfoContent1-block2 span {
  color: #FFFFFF;
  position: relative;
  font-size: 2vh;
  top: 0.75vh;
}

.OurInfoContent1-block3 {
  text-align: center;
  display: inline-block;
  background-color: #2B61CD;
  width: 6.5vw;
  height: 5vh;
  border-radius: 1vh;
  cursor: pointer;
  position: relative;
  top: 4vh;
}

.OurInfoContent1-block3:hover{
  opacity: 0.85;
}

.OurInfoContent1-block3 span {
  color: #FFFFFF;
  position: relative;
  font-size: 2vh;
  top: 0.75vh;
}

.OurInfoContent2 {
  display: inline-block;
  position: relative;
  top: 3.4vh;
  left: 15vw;
}

.OurInfoContent2-block1{
  position: relative;
  bottom: 2.8vh;
  left: 7vw;
}

.OurInfoContent2-block2 {
  display: inline-block;
  position: relative;
  bottom: 12.3vh;
  left: 2vw;
}

.OurInfoContent2-block3{
  display: inline-block;
  position: relative;
  bottom: 23vh;
  left: 2.7vw;
}

.OurInfoContent3 {
  display: inline-block;
  position: relative;
  bottom: 34.7vh;
  left: 26vw;
}

.OurInfoContent3-block1 {
  display: inline-block;
  text-align: center;
  width: 8vw;
  height: 5vh;
  border-radius: 1vh;
  background-image: url(../assets/HomePagePic/block3-bg.png);
  background-size: cover;
  position: relative;
  top: 3.5vh;
  margin-right: 1vw;
  cursor: pointer;
}

.OurInfoContent3-block1:hover{
  opacity: 0.85;
}

.OurInfoContent3-block1 span {
  color: white;
  position: relative;
  top: 1.1vh;
  opacity: 0.9;
}

.OurInfoContent3-block2 {
  display: inline-block;
  text-align: center;
  width: 6vw;
  height: 5vh;
  border-radius: 1vh;
  background-image: url(../assets/HomePagePic/block3-bg.png);
  background-size: cover;
  position: relative;
  top: 3.5vh;
  cursor: pointer;
}

.OurInfoContent3-block2:hover{
  opacity: 0.85;
}

.OurInfoContent3-block2 span {
  color: white;
  position: relative;
  top: 1.1vh;
  opacity: 0.9;
}

.OurInfoContent3-block3 {
  position: relative;
  top: 10vh;
}
/* 3D卡片 */
.wrap {
  position: relative;
  bottom: -11vh;
  right: -10%;
  width: 1200px;
  min-height: 100px;
  display: grid;
  grid-template-columns: 300px 300px 300px;
  justify-content: space-between;
}

.card-item {
  width: 100%;
  min-height: 70vh;
  border-radius: 20px;
  background-color: #fff;
  transform-style: preserve-3d;
  box-shadow: -1px 15px 30px -12px #fff;
}


.role {
  width: 100%;
  height: 230px;
  border-radius: 20px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  position: relative;
}

.role img {
  width: 390px;
  position: absolute;
  top: -30%;
  left: -18%;
  transform: translateZ(50px);
}


.des {
  margin-top: 40px;
  margin-bottom: 20px;
  text-align: center;
  transform: translateZ(50px);
}

.des h6 {
  color: #F6901A;
  font-weight: 400;
}

.des h1 {
  padding: 10px;
  font-size: 26px;
}

.des p {
  text-align: left;
  font-size: 14px;
  padding: 0 16px;
  color: #9e9e9e;
}


.btn-list {
  width: 100%;
  display: flex;
  justify-content: space-around;
  background-color: #F6901A;
  border-radius: 20px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.btn {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 20px 0;
}

.btn h3 {
  margin-bottom: 4px;
  color: #fff;
}

.btn span {
  font-size: 14px;
  color: #fff;
}
</style>
